import React, { useEffect, useState, useLayoutEffect } from "react";
import {
	Button,
	Select,
	Input,
	DatePicker,
	Dropdown,
	Menu,
	Space,
	Popover,
	Image,
	Typography,
	Form,
	InputNumber,
	message
} from "antd";

export const useSkuList = ({ selectedRows, onDrawerClose }) => {
	const [dataSource, setDataSource] = useState([...selectedRows]); //
	const tableKey = "SystemGoodsMatchSkuIntelligentMatchTableSku";
	const columns = [
		{
			name: "图片",
			code: "image",
			width: 60,
			render: (value, record) => <Image width={32} height={32} src={value} />
		},
		{
			name: "商品名称",
			code: "skuName",
			width: 300
		},
		{
			name: "款式编码",
			code: "spuCode",
			width: 160
		},
		{
			name: "商品编码",
			code: "skuCode",
			width: 160
		},

		{
			name: "商品简称",
			code: "skuAbbreviation",
			width: 160
		},
		{
			name: "颜色",
			code: "colour",
			width: 160
		},
		{
			name: "尺码",
			code: "specs",
			width: 160
		},
		{
			name: "零售价（元）",
			code: "retailPrice",
			align: "center",
			render: v => <span className="not-red">{v && `￥${Number(v).toFixed(2)}`}</span>
		},
		{
			name: "采购价（元）",
			code: "purchasePrice",
			align: "center",
			render: v => <span className="not-red">{v && `￥${Number(v).toFixed(2)}`}</span>
		},
		{
			name: "会员价（元）",
			code: "memberPrice",
			align: "center",
			render: v => <span className="not-red">{v && `￥${Number(v).toFixed(2)}`}</span>
		},
		{
			name: "成本价（元）",
			code: "costPrice",
			align: "center",
			render: v => <span className="not-red">{v && `￥${Number(v).toFixed(2)}`}</span>
		},
		{ name: "可用库存", code: "availableInventory" },
		{
			name: "重量(kg)",
			code: "weight",
			width: 90,
			render: value => value && value + "kg"
		}
	];

	const searchSimpleTableProps = {
		tableKey,
		rowKey: "id",
		// ///
		dataSource,
		columns,
		footer: false
	};

	return {
		tableKey,
		searchSimpleTableProps,
		dataSource
	};
};
